<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/yb' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#/yb">常用设置</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>名师列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button-group class="bunGrp">
      <el-button size="small" type="primary" @click="add()">新增</el-button>
      <el-button size="small" type="warning" @click="up()">修改</el-button>
      <el-button size="small" type="danger" @click="del()">删除</el-button>
    </el-button-group>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="login">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" autofocus></el-input>
          </el-form-item>
          <el-form-item label="等级" prop="veal">
            <el-input v-model="ruleForm.veal"></el-input>
          </el-form-item>
          <el-form-item label="头像" prop="img">
            <el-input v-model="ruleForm.img"></el-input>
          </el-form-item>
          <el-form-item label="课程数" prop="classes">
            <el-input v-model="ruleForm.classes"></el-input>
          </el-form-item>
          <el-form-item label="评论数" prop="comment">
            <el-input v-model="ruleForm.comment"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="desc">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <template>
      <el-table
        :data="tableData"
         v-loading="loading"
        stripe
        style="width: 100%"
        height="60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="id" label="id" align="center" width="180"></el-table-column>
        <el-table-column label="姓名" align="center" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <img :src="scope.row.img" width="50px" height="50px" alt />
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="veal" align="center" label="等级"></el-table-column>
        <el-table-column prop="classes" align="center" label="课程数"></el-table-column>
        <el-table-column prop="comment" align="center" label="评论数"></el-table-column>
        <el-table-column label="简介" align="center" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.desc }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}的简介</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="totols" :page-size="pagesize" style="padding-top:20px" :current-page="currentPage" @current-change='changepage'></el-pagination>
    </template>
  </div>
</template>
<script>
import qs from "qs";
import {IP} from "../util/util";
export default {
  data() {
    return {
      loading : true,
      tableData: [],
      totols:10,
      currentPage:1,
      pagesize:5,
      fromtype: "add",
      multipleSelection: [],
      ruleForm: {
        name: "",
        veal: "",
        img: "",
        classes: "",
        comment: "",
        desc: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        img: [
          { required: true, message: "请输入头像图链接", trigger: "blur" }
        ]
      },
      dialogVisible: false
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    add() {
      this.dialogVisible = true;
    },
    up() {
      let checked = this.multipleSelection;
      if (checked.length == 1) {
        this.fromtype = "up";
        this.dialogVisible = true;
        console.log(checked[0]);
        this.ruleForm = checked[0];
      } else {
        this.$message.error("请先选择一项!!");
      }
    },
    del() {
      let checked = this.multipleSelection;
      if (checked.length) {
        this.$confirm("确定要删除么？")
          .then(_ => {
            let ids = [];
            for (let i = 0; i < checked.length; i++) {
              ids.push(checked[i].id);
            }
            this.$ajax({
              url: "http://" + IP + "/tp5/public/index.php/index/teachers/del",
              method: "post",
              data: qs.stringify({
                id: ids.join(",")
              })
            }).then(res => {
              console.log(res);
              if (res) {
                this.getdata();
                this.$message.success("删除成功！");
              }
            });
          })
          .catch(_ => {});
      } else {
        this.$message.error("请先选择选项!!");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitbanner();
        } else {
          this.$message.error("请输入必填项!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.fromtype = "add";
      this.$refs[formName].resetFields();
      this.ruleForm = {
        title: "",
        url: "",
        w_url: ""
      };
      this.getdata();
    },
    submitbanner() {
      // console.log(this.ruleForm);
      // return;
      var upid = this.multipleSelection[0] ? this.multipleSelection[0].id : "";
      // console.log(upid);return;
      this.$ajax({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: "http://" + IP + "/tp5/public/index.php/index/teachers/save",
        // url: "http://" + IP + "/api.php/test/banner",
        method: "post",
        data: qs.stringify({
          name: this.ruleForm.name,
          veal: this.ruleForm.veal,
          img: this.ruleForm.img,
          classes: this.ruleForm.classes,
          comment: this.ruleForm.comment,
          desc: this.ruleForm.desc,
          type: this.fromtype,
          id: upid
        })
      }).then(res => {
        // console.log(res);return;
        if (res) {
          this.getdata();
          this.$message.success(
            this.fromtype == "add" ? "添加成功！" : "修改成功！"
          );
          this.resetForm("ruleForm");
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.resetForm("ruleForm");
        })
        .catch(_ => {});
    },
    changepage(page){
      if(this.currentPage != page){
        this.currentPage = page;
        this.getdata();
      }
      // console.log(page)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    getdata() {
      // console.log(this.currentPage);
      this.$ajax({
        // url: "http://"+IP+"/api.php/test/teachers",
        url: "http://"+IP+"/tp5/public/index.php/index/teachers",
        method: "get",
        params: {
          pageCurrent: this.currentPage,
          pageSize:this.pagesize
        }
        // params: {
        //   transform: 1,
        //   order:'id,desc',
        //   page:`${this.currentPage},5`
        // }
      }).then(res => {
        this.loading = false;
        this.tableData = res.data.data.list;
        this.totols = res.data.data.count;
        // console.log(res.data.banner);
        // return;
        console.log(res);
      });
    }
  }
};
</script>

<style>
.bunGrp {
  margin-top: 10px;
}
</style>
